import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { WeaErrorPage, WeaTools, WeaReqTop, WeaLocaleProvider, WeaAlertPage } from 'ecCom';
import { Button, Spin } from 'antd';

const getLabel = WeaLocaleProvider.getLabel;
const { tryCatch, viewer } = WeaTools;

@tryCatch(
  React,
  props => <WeaErrorPage msg={ props.error || getLabel(186, '对不起，该页面异常，请联系管理员！', 'error')} />,
  { error: '' }
)
@inject('filePreviewStore')
@observer
export default class FilePreview extends Component {
  constructor(props) {
    super(props);
    this.prefixCls = 'vote-filepreview';
  }

  componentWillMount() {
    const { filePreviewStore: { getFileInfo }, location: { query } } = this.props;
    let id = query.fileid || '';
    getFileInfo({id});
  }

  componentWillReceiveProps(nextProps) {
    const { location: { query: { fileid: _id } }, filePreviewStore: { getFileInfo } } = this.props;
    const { location: { query: { fileid: _idn } } } = nextProps;
    if (_id !== _idn) getFileInfo({id: _idn});
  }

  componentWillUnmount() {
    const { filePreviewStore } = this.props;
    filePreviewStore.clear();
  }

  // 无权限查看页面
  renderNoRight = () => (
    <div className={this.prefixCls}>
      <div className={`${this.prefixCls}-noRight`}>
        <WeaAlertPage>
          <div className={`${this.prefixCls}-noRight-msg`}>您当前不具备查看该文档的权限</div>
        </WeaAlertPage>
      </div>
    </div>
  )

  renderContent = () => {
    const { filePreviewStore } = this.props;
    const { contentLoading, contentMsg, previewUrl, fileIsImg, fileId, filePath } = filePreviewStore;
    if (fileIsImg) {
      return (
        <div className={`${this.prefixCls}-content-image`}>
          <img data-imgsrc={previewUrl} ref={fileId} src={previewUrl} className="formImgPlay" onClick={viewer} />
        </div>
      )
    } else {
      if (contentLoading) {
        return <Spin/>
      } else if (filePath === '') {
        return (
          <div className={`${this.prefixCls}-content-waring`}>
            <span>{contentMsg}</span>
          </div>
        )
      }
      return (
        <div className={`${this.prefixCls}-content-file`}>
          <iframe className='emailFile-iframe' src={filePath}/>
        </div>
      )
    }
  }

  render() {
    const { filePreviewStore } = this.props;
    const { fileLoading, fileRight, fileName, fileDownload, fileMsg } = filePreviewStore;
    const buttons = [
      <Button className={`${this.prefixCls}-downloadBtn`} type='primary' onClick={() => window.open(fileDownload)}>{getLabel(31156, '下载')}</Button>
    ]
    if (fileLoading) {
      return <div className={this.prefixCls}><Spin size="large"/></div>
    } else if (!fileRight) {
      return this.renderNoRight();
    } else if (fileMsg !== '') {
      return (
        <div className={this.prefixCls}>
          <div className={`${this.prefixCls}-content-waring`}>
            <span>{contentMsg}</span>
          </div>
        </div>
      )
    }
    return (
      <div className={this.prefixCls}>
        <WeaReqTop
          icon={<i className='icon-coms-doc'/>}
          iconBgcolor='#df583a'
          title={`${getLabel(156, '附件')}: ${fileName}` || getLabel(130030,'文档标题')}
          buttons={buttons}
        >
          <div className={`${this.prefixCls}-content`}>
            <div className={`${this.prefixCls}-content-container`}>
              { this.renderContent() }
            </div>
          </div>
        </WeaReqTop>
      </div>
    )
  }
}
